/**
 * In2Solar Monitor
 * 
 * This is version 0.1.0 of the software, and is written using the Google Web Toolkit 
 * Library and plugin.
 * 
 */

package com.in2solar.in2solarmonitor.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.ClickListener;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import org.adamtacy.client.ui.effects.impl.Fade;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
@SuppressWarnings("deprecation")
public class In2SolarMonitor implements EntryPoint, ClickListener {
	
	// The pageWidth and pageHeight variables are a messy way of getting the HTML iframe and object tags to display fullscreen.
	static int pageWidth = Window.getClientWidth();
	static int pageHeight = Window.getClientHeight()-5;
	
	
	//TODO We need to replace the following with some sort of data access from the "System XML file", a place to store the 
	// data for a particular system, so that the video and multimedia data can be pulled from it instead of hard coded into the application.
	
	// This data url tells the data iframe where to go. This should be replaced by the System XML file.
	static String dataURL = "https://enlighten.enphaseenergy.com/public/systems/BxqT67";
	
	// This is a title for the Job, which should also go in the system XML file
	static String title = "Eich Residence";
	
	// This is the video data. It should also go in the System XML file.
	static String vidType = "youtube";
	static String vidID = "PqfwNbB0QqQ";
	static double vidDurationMin = 1.28;
	
	// Uncomment this to see the app play a Vimeo video instead of YouTube.
	//static String vidType = "vimeo";
	//static String vidID = "9245154";
	//static double vidDurationMin = 5.51;
	
	// The following takes the video duration in minutes from vidDurationMin and converts it to Milliseconds, adding 
	// thirteen seconds for the video to load.
	static int vidDurationMill = (int) ((vidDurationMin * 60000) + 13000);
	
	// This is the main HTML display widget, which is initially set to display the data page defined by dataURL.
    public static HTML html = new HTML("<iframe width=" + pageWidth + " height=" + (pageHeight - 25) + " frameborder=0 src='https://enlighten.enphaseenergy.com/public/systems/BxqT67'>Eich Residence</iframe>");
    
    // This vertical panel holds the HTML panel above.
    public static VerticalPanel content = new VerticalPanel();
    
    // This horizontal panel holds the control bar.
    public static HorizontalPanel controls = new HorizontalPanel();
    
    // These are the two fade controls. fadeControls fades the control bar, fadePage fades the vertical panel.
	static Fade fadeControls = new Fade(controls.getElement());
	static Fade fadePage = new Fade(content.getElement());
	
  /**
   * This is the entry point method.
   */
  public void onModuleLoad() {
	  
	  // html is the main HTML panel
	  html.setSize("100%", "100%");
	  html.setStyleName("html");
	  
	  // content refers to the Vertical Panel
	  content.add(html);
	  
	  // controls refers to the Horizontal Panel
	  controls.add(new Button("Data", this));
	  controls.add(new Button("Video", this));
	 
	  RootPanel.get("controls").add(controls);
	  RootPanel.get("content").add(content);
	  
	  // This starts the Timer defined in the StartTimer class for 15 seconds.
	  StartTimer.t.schedule(15000);
  }

  
  // This method handles the control bar clicks.
public void onClick(Widget sender){
	
	  String name = sender.toString();
	  
	  // If somebody clicked the Data button...
	  if (name.contains("Data")){
		  
		  // ...then we check if the HTML panel contains the Data page...
		  if (In2SolarMonitor.html.getHTML().contains(In2SolarMonitor.dataURL)){
			  
			  // ...if it does, we just stay where we are.
			  
		  }
		  else{
			  
			  // ...if it doesn't, then we cancel the timer...
			  StartTimer.t.cancel();
			  
			  // and display the data.
			  goData();
		  }
	  }
	  else if (name.contains("Video")){
		  
		  // If somebody clicked on the Video button, then we cancel the timer...
		  StartTimer.t.cancel();
		  
		  // ...and display the Video.
		  goVideo();
	  }
	  else{
		  //Do Nothing
	  }
	  	
	  
  }

// This method hides the Control Bar.
public static void hideControls(){
	fadeControls.play(0.0,1.0);
	RootPanel.get("controls").setHeight("0");
}

// And this one displays it.
public static void showControls(){
	RootPanel.get("controls").setHeight("20");
	fadeControls.play(1.0,0.0);
	
}

	// This method displays the video
  public static void goVideo() {
	  
	  // First, we fade the page.
	  fadePage.play(0.0,1.0);
	  
	  // Then, because we need to load the video while the page is still faded out, we start a timer to load the video.
	  Timer videoLoad = new Timer(){
		  public void run(){
			  
			  // This timer loads the video...
			  Video.loadVideo(vidType, vidID);
			  // ...and then hides the controls.
			  RootPanel.get("controls").setHeight("0");
			  
			  // Then we start a new timer to fade the page in again...
			  Timer waitFade = new Timer(){
				  public void run(){
					  
					  // ...and then after two seconds, it fades the page in again.
					  fadePage.play(1.0,0.0);
				  }
			  };
			  waitFade.schedule(2000);
		  }
	  };
	  videoLoad.schedule(2000);
  }

  // here we use the same timer system as in goVideo() to load the data page.
public static void goData() {
	
	// First, we fade the page.
	fadePage.play(0.0,1.0);
	
	// Then we start the timer...
	Timer dataLoad = new Timer(){
		  public void run(){
			  
			  // ...then we load the data in the HTML panel...
			  html.setHTML("<iframe width=" + pageWidth + " height=" + pageHeight + " frameborder=0 src='" + dataURL + "'>" + title + "</iframe>");
			  
			  Timer waitFade = new Timer(){
				  public void run(){
					  
					  // ...then we fade the page in and start the timer.
					  fadePage.play(1.0,0.0);
					  StartTimer.t.schedule(15000);
				  }
			  };
			  
			  // The important difference is that we allowed enough time to load the data completely before fading it in.
			  waitFade.schedule(6000);
		  }
	  };
	  dataLoad.schedule(2000);
  }
}

//TODO Create a system for showing / hiding the controls based on user interactivity, i.e. mouse movement.